<template>
    <!--语法：
v-on:事件名字="事件处理函数"
v-on:事件名字="事件处理函数（实参）"
简写的方式：@事件名字="事件处理函数"
-->
    <h2>去胖来购物</h2>
    <h3>购买的数量统计：{{ count }}</h3>
    <button v-on:click="count++">购买一件</button>
    <button v-on:click="add">每次购买一件</button>
    <button @click="subCount(5)">每次购买5件</button>
    <hr>
    <div>
        <a href="http://www.baidu.com" @click="one">阻止去百度</a> &nbsp; &nbsp;
        <a href="http://m.jd.com" @click="two(10, $event)">默认行为</a>
    </div>
    <!--阻止冒泡： .stop
        默认行为： .prevent
    -->
    <div>
        <p v-bind:[idname]="id">v-bind的绑定</p>
        <button @click="idname = 'class'">calss选择器</button>
        <!-- <span id="d1" style="color:red"></span> -->
        <!--
    .stop 阻止冒泡
    .prevent 阻止默认行为
    .once 只触发一次事件
    -->
        <div @click="onediv">
            <button @click.stop="btn">阻止冒泡</button> <br>
            <a href="http://www.baidu.com" @click.prevent="btn">阻止默认行为</a><br>
            <button @click.once="btn">触发一次行为</button>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            count: 0,
            id: 'd1',
            idname: 'id'

        }
    },
    methods: {
        add() {
            this.count++
        },
        subCount(num) {
            this.count += num
        },
        one(e) {
            //阻止默认行为 触发条件
            e.preventDefault()

        },
        //事件触发的方式
        two(num, e) {
            this.count += num
            e.preventDefault()
        },
        onediv() {
            console.log("我被触发了。。。");

        },
        btn() {
            console.log("我点击了。。");

        }

    }

}


</script>
<style scoped>
#d1 {
    color: red;
}

.d1 {
    color: rgb(96, 21, 216);
}
</style>